let all=document.querySelector('.filter')
//let ul = document.querySelector('.content > ul');
{/* ul里<li>
    <img src=pic/>
    <p>2020西太湖国际音乐节</p>name
    <p>城市: 常州</p>city
    <p>地址: 常州西太湖中国花卉博览景区北门</p>address
    <p>价格: 199-399</p>price
    <p>演出时间: 2020.09.19-09.20</p>showTime
</li> */}
let num=4//一页显示几个
let i//数据的下标
let total=list.length//28
let pageToatal=7//一共多少页
let page=1//当前是第几页
function data(){//动态生成li生成后面的数据
    let endIdex=page*num
    if(endIdex>total)endIdex=total
    for(i=(page-1)*num; i<endIdex; i++) {
        let o=list[i]
        let li=document.createElement('li')
        let img=document.createElement('img')
        li.appendChild(img)
        all.nextElementSibling.children[0].appendChild(li)
        for (const key in o) {//获取li里的信息
            if(key==='pic')img.setAttribute('src',o[key])
            if(key==='name'){
                let p=document.createElement('p')
                p.innerText=o[key]
                li.appendChild(p)
            }
            if(key==='city'){
                let p=document.createElement('p')
                p.innerText='城市：'+o[key]
                li.appendChild(p)
            }
            setTimeout(()=>{//调整数据的渲染顺序
                if(key==='address'){
                    let p=document.createElement('p')
                    p.innerText='地址：'+o[key]
                    li.appendChild(p)
                }
            },)
            setTimeout(()=>{
                if(key==='price'){
                    let p=document.createElement('p')
                    p.innerText='价格：'+o[key]
                    li.appendChild(p)
                }
            },1)
            setTimeout(()=>{
                if(key==='showTime'){
                    let p=document.createElement('p')
                    p.innerText='演出时间：'+o[key]
                    li.appendChild(p)
                }
            },2)
        }
    }
}
data()
all.addEventListener('click',()=>{
    if(event.target.localName==='select'){//渲染一页
            num=all.lastElementChild.options[all.lastElementChild.selectedIndex].value//获取下拉框选中的值
            if(num!=4 || pageToatal!=7){
                //清空之前渲染的数据
                while(all.nextElementSibling.children[0].firstChild)all.nextElementSibling.children[0].
                removeChild(all.nextElementSibling.children[0].firstChild)
                pageToatal=Math.ceil(total/num)
                data()
                all.children[1].innerText=page+" / "+pageToatal
            }
            if(pageToatal<page)page=1
    }
    if(event.target.className==='next'){
        page++
        if(page>pageToatal){//防止点击过快
            page=pageToatal
            return//不再刷新页面
        }
        if(page!=1){
            //all.children[0].classList.remove('disable')
            all.children[0].style.cursor='pointer'
            all.children[0].style.backgroundColor='skyblue'
        }
        if(page==pageToatal){
            //event.target.classlist.toggle('disable')
            event.target.style.cursor='not-allowed'
            event.target.style.backgroundColor='#ccc'
        }
        if(page<pageToatal+1){
            all.children[1].innerText=(page)+" / "+pageToatal
            while(all.nextElementSibling.children[0].firstChild)all.nextElementSibling.children[0].
            removeChild(all.nextElementSibling.children[0].firstChild)
            data()
        }
    }
    if(event.target.className==='prev disable'){//需要写全类名！！！！！！！！！！！！！
        page--
        if(page<1){//防止点击过快
            page=1
            return//不再刷新页面
        }
        if(page==pageToatal-1){
            all.children[2].style.cursor="pointer"
            all.children[2].style.backgroundColor="skyblue"
        }
        if(page===1){
            all.children[0].style.cursor="not-allowed"
            all.children[0].style.backgroundColor="#ccc"
        }
        if(page>0){//////////////////////////////////////////////////////
            all.children[1].innerText=(page)+" / "+pageToatal
            while(all.nextElementSibling.children[0].firstChild)all.nextElementSibling.children[0].
            removeChild(all.nextElementSibling.children[0].firstChild)
            data()
        }
    }
})